/**
 * 创建于：2016-5-26
 * 创建人：杨骐彰
 * 说明：带表格的面板
 */

import React,{Component} from 'react'
import './style.scss'
import BaseComponent from 'basecomponent'
import {MySelect,SelectList,SelectState}
  from 'redux-components/dropdownselect'
import icons from 'icons'
import Button from 'redux-components/button'


export default class TimeIntervalSetting  extends BaseComponent{

  constructor(props) {
    super(...arguments);
  }



  render(){
    const {titleText,footerText,showHeader,showFooter,onChange,handleAdd,selectStates,length,handleDelete} =this.props;
    return (
      <div className="interval-setting">
        {
          showHeader&&<div className="interval-title">{titleText}</div>
        }

          {
            length.length?length.map((l,index)=>{
              return <div className="modal-line">
                <div className="modal-line-left">时段{index+1}</div>
                <div className="modal-line-select" style={{margin: 0}}>
                  <MySelect onChange={(obj)=>onChange(`openHour${l}`,obj)} little={true}
                    {...selectStates.getSelect(`openHour${l}`)} style={{width:'70px',height:'30px',marginRight:'10px'}}
                  >
                    {selectStates.getSelect(`openHour${l}`).open&&
                    <SelectList {...selectStates.getSelect(`openHour${l}`)}
                      onChange={(obj,cb)=>{onChange(`openHour${l}`,obj,cb)}}
                    />}
                  </MySelect>

                  <MySelect onChange={(obj)=>onChange(`openMinute${l}`,obj)} little={true}
                    {...selectStates.getSelect(`openMinute${l}`)} style={{width:'70px',height:'30px'}}
                  >
                    {selectStates.getSelect(`openMinute${l}`).open&&
                    <SelectList {...selectStates.getSelect(`openMinute${l}`)}
                      onChange={(obj,cb)=>{onChange(`openMinute${l}`,obj,cb)}}
                    />}
                  </MySelect>
                </div>
                <span style={{color: '#52caff',lineHeight:'30px',margin:'0px 15px'}}>—</span>
                <div className="modal-line-select">
                  <MySelect onChange={(obj)=>onChange(`offHour${l}`,obj)} little={true}
                    {...selectStates.getSelect(`offHour${l}`,)} style={{width:'70px',height:'30px',marginRight:'10px'}}
                  >
                    {selectStates.getSelect(`offHour${l}`,).open&&
                    <SelectList {...selectStates.getSelect(`offHour${l}`,)}
                      onChange={(obj,cb)=>{onChange(`offHour${l}`,obj,cb)}}
                    />}
                  </MySelect>

                  <MySelect onChange={(obj)=>onChange(`offMinute${l}`,obj)} little={true}
                    {...selectStates.getSelect(`offMinute${l}`)} style={{width:'70px',height:'30px'}}
                  >

                    {selectStates.getSelect(`offMinute${l}`).open&&
                    <SelectList {...selectStates.getSelect(`offMinute${l}`)}
                      onChange={(obj,cb)=>{onChange(`offMinute${l}`,obj,cb)}}
                    />}
                  </MySelect>
                </div>
                 <span className="delete" onClick={()=>handleDelete(l)}>
                 </span>
              </div>
          }):<div></div>
          }


        {
          showFooter&&<Button className="interval-footer" onClick ={()=>handleAdd()}>
            <img src={icons.addTask} style={{ verticalAlign:'middle',marginRight:'.25rem'}}/>
            {footerText}</Button>
        }
      </div>
    )
  }
  };

TimeIntervalSetting.defaultProps = {
  showFooter: true,
  showHeader: true,
  titleText:'禁止运行时段',
  footerText: '添加时段',
  length:[1]
};


